<script setup lang="ts">
import { ref, watch } from 'vue';
import axios from 'axios'
import { ApiResponse, ArticleData, Article } from '../types/data';
import { useChannelStore } from '../store/channel';

/**
 * 1. 先接受父组件传过来的activeId
 * 2. 发送请求 - onMounted
 *      onMounted 就挂载的时候发送了一次 - 可以用watch配置immediate这样一上来就发请求
 *      每次切换频道 都要发送请求
 *    方式一  onUpdated 数据更新的时候发请求
 *    方式二（建议用笔记watch - watch比update更常用） watch 监听器 监听active的变化 有变化就发送请求
 * 3. 发请求 拿到数据
 *      配置泛型 写数据字段类型
 * 4. 赋值响应式数据 做渲染
 */

 const channelStore = useChannelStore()

// onMounted(() => {
//   console.log('发请求', props.activeId);
// })
// onUpdated(() => {
//   console.log('onUpdate', props.activeId);
// })
// watch(0, () => {})
const list = ref<Article[]>([])
watch(() => channelStore.activeId, async (val) => {
  /**
   * `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          channel_id: props.channelId,
          timestamp: Date.now(),
        },
      },
   */
  const res = await axios.get<ApiResponse<ArticleData>>(`http://geek.itheima.net/v1_0/articles`,
    {
      params: {
        channel_id: val,
        timestamp: Date.now(),
      },
    },)
  // console.log(res.data.data.results);
  list.value = res.data.data.results
}, {
  immediate: true
})
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <img v-for="url in item.cover.images" class="img" :src="url" alt="">
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
